<template>
    <!-- 对话框表单 -->
    <el-dialog 
    class="ba-operate-dialog" 
    :close-on-click-modal="false" 
    :model-value="baTable.form.operate ? true : false" 
    @close="baTable.toggleForm"
    :open-delay="100">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
                :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
            >
                <el-form
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items"
                    label-position="right"
                    :label-width="'100px'"
                    :rules="rules"
                    :disabled="baTable.form.operate =='view'||baTable.form.operate =='查看'"
                >
                        <FormItem
                            :label="'罐证'"
                            type="image"
                            v-model="baTable.form.items!.GZFILE"
                            prop="GZFILE"
                            :input-attr="{ placeholder: t('Please input field', { field: '罐证' }) }"
                        />
                        <FormItem
                            :label="'图纸'"
                            type="image"
                            v-model="baTable.form.items!.TZFILE"
                            prop="TZFILE"
                            :input-attr="{ placeholder: t('Please input field', { field: '图纸' }) }"
                        />
                        <FormItem
                            :label="'规范'"
                            type="image"
                            v-model="baTable.form.items!.GFFILE"
                            prop="GFFILE"
                            :input-attr="{ placeholder: t('Please input field', { field: '规范' }) }"
                        />
                        <FormItem
                            :label="t('xPot.FILEPATH')"
                            type="image"
                            v-model="baTable.form.items!.GXFILE"
                            prop="GXFILE"
                            :input-attr="{ placeholder: t('Please input field', { field: t('xPot.FILEPATH') }) }"
                        />
                    <div style="width: 100%;">
                        <FormItem
                            :label="t('xPot.TCNO')"
                            type="string"
                            v-model="baTable.form.items!.TCNO"
                            prop="TCNO"
                            :input-attr="{ placeholder: '请输入箱号' }"
                        />
                    </div>
                    <FormItem
                        :label="t('xPot.KIND')"
                        v-model="baTable.form.items!.KIND"
                        prop="KIND"
                        type="remoteSelect"
                        :input-attr="{
                            pk: 'code',
                            field: 'codename',
                            'remote-url': codelib + 'now?where=potkind',
                            placeholder: t('Click Select'),
                        }"
                    />
                    <FormItem
                        :label="t('xPot.OWER')"
                        v-model="baTable.form.items!.OWER"
                        prop="OWER"
                        type="select"
                        :data="{ content: { 自有罐: '自有罐', 租赁罐: '租赁罐' } }"
                        :input-attr="{
                            placeholder: t('Please input field', { field: t('xPot.OWER') }),
                            onChange: handleOwerChange,
                        }"
                    />
                    <FormItem
                        :label="t('xPot.LEASEHOLDER')"
                        type="string"
                        v-model="baTable.form.items!.LEASEHOLDER"
                        prop="LEASEHOLDER"
                        :input-attr="{ placeholder: t('Please input field', { field: t('xPot.LEASEHOLDER') }),disabled:baTable.form.items!.OWER!=='租赁罐' }"
                    />
                    <FormItem
                        :label="t('xPot.QZDATE')"
                        type="datetime"
                        v-model="baTable.form.items!.QZDATE"
                        prop="QZDATE"
                        :input-attr="{ placeholder: t('Please select field'),disabled:baTable.form.items!.OWER!=='租赁罐' }"
                    />
                    <FormItem
                        :label="t('xPot.TANKCODE')"
                        v-model="baTable.form.items!.TANKCODE"
                        prop="TANKCODE"
                        type="remoteSelect"
                        :input-attr="{
                            pk: 'code',
                            field: 'codename',
                            'remote-url': codelib + 'now?where=allowtanktype',
                            placeholder: t('Click Select'),
                        }"
                    />
                    <FormItem
                        :label="t('xPot.MONEYTYPE')"
                        v-model="baTable.form.items!.MONEYTYPE"
                        prop="MONEYTYPE"
                        type="remoteSelect"
                        :input-attr="{
                            pk: 'MONEYTYPE',
                            field: 'CURNAME',
                            'remote-url': codelib + 'curr',
                            placeholder: t('Click Select'),
                        }"
                    />

                    <FormItem
                        :label="t('xPot.DAILYRENT')"
                        type="number"
                        prop="DAILYRENT"
                        v-model.number="baTable.form.items!.DAILYRENT"
                        :input-attr="{ step: '0.01', placeholder: t('Please input field', { field: t('xPot.DAILYRENT') }),disabled:baTable.form.items!.OWER!=='租赁罐' }"
                    />
                    <FormItem
                        :label="t('xPot.TIMELIMIT')"
                        type="number"
                        prop="TIMELIMIT"
                        v-model.number="baTable.form.items!.TIMELIMIT"
                        :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('xPot.TIMELIMIT') }),disabled:baTable.form.items!.OWER!=='租赁罐' }"
                    />
                    <FormItem
                        :label="t('xPot.STATUS')"
                        v-model="baTable.form.items!.STATUS"
                        prop="STATUS"
                        type="remoteSelect"
                        :input-attr="{
                            pk: 'code',
                            field: 'codename',
                            'remote-url': codelib + 'now?where=potstatus',
                            onChange: handleStatusChange,
                        }"
                    />
                    <FormItem
                        :label="t('xPot.BFDATE')"
                        type="datetime"
                        v-model="baTable.form.items!.BFDATE"
                        prop="BFDATE"
                        :input-attr="{ placeholder: t('Please select field'),disabled:baTable.form.items!.STATUS!=='YBF'}"
                    />
                    <FormItem
                        :label="t('xPot.SELLDATE')"
                        type="datetime"
                        v-model="baTable.form.items!.SELLDATE"
                        prop="SELLDATE"
                        :input-attr="{ placeholder: t('Please select field'),disabled:baTable.form.items!.STATUS!=='YCS' }"
                    />
                    <FormItem
                        :label="t('xPot.TZDATE')"
                        type="datetime"
                        v-model="baTable.form.items!.TZDATE"
                        prop="TZDATE"
                        :input-attr="{ placeholder: t('Please select field') ,disabled:baTable.form.items!.OWER!=='租赁罐'}"
                    />
                    <FormItem
                        style="width: 50%"
                        :label="t('xPot.TZNOTE')"
                        type="textarea"
                        v-model="baTable.form.items!.TZNOTE"
                        prop="TZNOTE"
                        :input-attr="{ rows: 3, placeholder: t('Please input field', { field: t('xPot.TZNOTE') }) }"
                        @keyup.enter.stop=""
                        @keyup.ctrl.enter="baTable.onSubmit(formRef)"
                    />
                    <FormItem
                        style="width: 50%"
                        :label="t('xPot.REMARK')"
                        type="textarea"
                        v-model="baTable.form.items!.REMARK"
                        prop="REMARK"
                        :input-attr="{ rows: 3, placeholder: t('Please input field', { field: t('xPot.REMARK') }) }"
                        @keyup.enter.stop=""
                        @keyup.ctrl.enter="baTable.onSubmit(formRef)"
                    />
                    <!-- 下半部分 -->
                    <el-row style="width: 100%">
                        <el-col :span="18" class="down-wrapper">
                            <FormItem
                                :label="t('xPot.MANUFACTURER')"
                                type="string"
                                v-model="baTable.form.items!.MANUFACTURER"
                                prop="MANUFACTURER"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.MANUFACTURER') }) }"
                            />
                            <FormItem
                                :label="t('xPot.TANKSIZE')"
                                v-model="baTable.form.items!.TANKSIZE"
                                prop="TANKSIZE"
                                type="remoteSelect"
                                :input-attr="{
                                    pk: 'code',
                                    field: 'codename',
                                    'remote-url': codelib + 'now?where=consize',
                                }"
                            />
                            <FormItem
                                :label="t('xPot.SCCG')"
                                type="string"
                                v-model="baTable.form.items!.SCCG"
                                prop="SCCG"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.SCCG') }) }"
                            />

                            <FormItem
                                :label="t('xPot.IIC')"
                                type="datetime"
                                v-model="baTable.form.items!.IIC"
                                prop="IIC"
                                :input-attr="{ placeholder: t('Please select field', { field: t('xPot.IIC') }) }"
                            />
                            <FormItem
                                :label="t('xPot.FRAMETYPE')"
                                v-model="baTable.form.items!.FRAMETYPE"
                                prop="FRAMETYPE"
                                type="select"
                                :data="{ content: { Full: 'Full', beam: 'beam', collar: 'collar' } }"
                            />
                            <FormItem
                                :label="t('xPot.HXGDF')"
                                type="string"
                                v-model="baTable.form.items!.HXGDF"
                                prop="HXGDF"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.HXGDF') }) }"
                            />

                            <FormItem
                                :label="t('xPot.ZZDATE')"
                                type="datetime"
                                v-model="baTable.form.items!.ZZDATE"
                                prop="ZZDATE"
                                :input-attr="{ placeholder: t('Please select field', { field: t('xPot.ZZDATE') }) }"
                            />
                            <FormItem
                                :label="t('xPot.HOTTYPE')"
                                type="string"
                                v-model="baTable.form.items!.HOTTYPE"
                                prop="HOTTYPE"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.HOTTYPE') }) }"
                            />
                            <FormItem
                                :label="t('xPot.WALKTYPE')"
                                v-model="baTable.form.items!.WALKTYPE"
                                prop="WALKTYPE"
                                type="select"
                                :input-attr="{ allowCreate:true,filterable:true }"
                                :data="{ content: { '':'全走道',B: 'B', E: 'E', H: 'H', F: 'F' } }"
                            />

                            <FormItem
                                :label="t('罐龄')"
                                type="string"
                                v-model="baTable.form.items!.POTAGE"
                                prop="POTAGE"
                                :input-attr="{ placeholder: t('Please input field'),disabled:true }"
                            />
                            <FormItem
                                :label="t('xPot.BWCLX')"
                                type="string"
                                v-model="baTable.form.items!.BWCLX"
                                prop="BWCLX"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.BWCLX') }) }"
                            />
                            <FormItem
                                :label="t('xPot.AQF')"
                                type="string"
                                v-model="baTable.form.items!.AQF"
                                prop="AQF"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.AQF') }) }"
                            />
                            
                            <FormItem
                                :label="t('xPot.CAPACITY')"
                                type="string"
                                v-model="baTable.form.items!.CAPACITY"
                                prop="CAPACITY"
                                :input-attr="{ placeholder: t('Please select field', { field: t('xPot.CAPACITY') }) }"
                            />
                            <FormItem
                                :label="t('xPot.GTCL')"
                                type="string"
                                v-model="baTable.form.items!.GTCL"
                                prop="GTCL"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.GTCL') }) }"
                            />
                            <FormItem
                                :label="t('xPot.TQF')"
                                type="string"
                                v-model="baTable.form.items!.TQF"
                                prop="TQF"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.TQF') }) }"
                            />
                            <FormItem
                                :label="t('xPot.TARE')"
                                type="number"
                                prop="TARE"
                                v-model.number="baTable.form.items!.TARE"
                                :input-attr="{ step: '0.01', placeholder: t('Please input field', { field: t('xPot.TARE') }) }"
                            />
                            <FormItem
                                :label="t('xPot.GPS')"
                                v-model="baTable.form.items!.GPS"
                                prop="GPS"
                                type="select"
                                :data="{ content: { 有: '有', 无: '无' } }"
                            />
                            <FormItem
                                :label="t('xPot.SYYL')"
                                type="string"
                                v-model="baTable.form.items!.SYYL"
                                prop="SYYL"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.SYYL') }) }"
                            />

                            <FormItem
                                :label="t('xPot.ZZ')"
                                type="string"
                                v-model="baTable.form.items!.ZZ"
                                prop="ZZ"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.ZZ') }) }"
                            />
                            <FormItem
                                :label="t('xPot.JRPMJ')"
                                type="string"
                                v-model="baTable.form.items!.JRPMJ"
                                prop="JRPMJ"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.JRPMJ') }) }"
                            />
                            <FormItem
                                :label="t('xPot.GTNCC')"
                                type="string"
                                v-model="baTable.form.items!.GTNCC"
                                prop="GTNCC"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.GTNCC') }) }"
                            />
                            <FormItem
                                :label="t('xPot.RZCJS')"
                                type="string"
                                v-model="baTable.form.items!.RZCJS"
                                prop="RZCJS"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.RZCJS') }) }"
                            />
                            <FormItem
                                :label="t('xPot.FSLG')"
                                v-model="baTable.form.items!.FSLG"
                                prop="FSLG"
                                type="select"
                                :data="{ content: { 有: '有', 无: '无' } }"
                                :input-attr="{
                                    placeholder: t('Please input field', { field: t('xPot.FSLG') }),
                                }"
                            />
                            <FormItem
                                :label="t('xPot.ZDXKZZ')"
                                type="string"
                                v-model="baTable.form.items!.ZDXKZZ"
                                prop="ZDXKZZ"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.ZDXKZZ') }) }"
                            />

                            <FormItem
                                :label="t('xPot.GTSJWD')"
                                type="string"
                                v-model="baTable.form.items!.GTSJWD"
                                prop="GTSJWD"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.GTSJWD') }) }"
                            />
                            <FormItem
                                :label="t('xPot.DFTYPE')"
                                type="string"
                                v-model="baTable.form.items!.DFTYPE"
                                prop="DFTYPE"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.DFTYPE') }) }"
                            />
                            <FormItem
                                :label="t('xPot.ZDYL')"
                                type="string"
                                v-model="baTable.form.items!.ZDYL"
                                prop="ZDYL"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.ZDYL') }) }"
                            />
                        </el-col>
                        <el-col :span="6">
                            <FormItem
                                :label="t('xPot.AQFBK')"
                                type="string"
                                v-model="baTable.form.items!.AQFBK"
                                prop="AQFBK"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.AQFBK') }) }"
                            />
                            <FormItem
                                :label="t('xPot.BK1')"
                                type="string"
                                v-model="baTable.form.items!.BK1"
                                prop="BK1"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.BK1') }) }"
                            />
                            <FormItem
                                :label="t('xPot.BK2')"
                                type="string"
                                v-model="baTable.form.items!.BK2"
                                prop="BK2"
                                :input-attr="{ placeholder: t('Please input field', { field: t('xPot.BK2') }) }"
                            />
                            <FormItem
                                :label="t('xPot.GXJRFS')"
                                v-model="baTable.form.items!.GXJRFS"
                                prop="GXJRFS"
                                type="remoteSelect"
                                :input-attr="{
                                    pk: 'code',
                                    multiple: true,
                                    field: 'codename',
                                    'remote-url': codelib + 'now?where=jrfs',
                                }"
                            />
                            <FormItem
                                :label="t('xPot.GXCGQPZ')"
                                v-model="baTable.form.items!.GXCGQPZ"
                                prop="GXCGQPZ"
                                type="remoteSelect"
                                :input-attr="{
                                    pk: 'code',
                                    multiple: true,
                                    field: 'codename',
                                    'remote-url': codelib + 'now?where=cgqpz',
                                }"
                            />
                            <FormItem
                                :label="t('xPot.OP')"
                                type="string"
                                v-model="baTable.form.items!.OP"
                                prop="OP"
                                :input-attr="{ placeholder: '当前登录人', disabled: true }"
                            />
                            <FormItem
                                :label="t('xPot.OPTIME')"
                                type="datetime"
                                v-model="baTable.form.items!.OPTIME"
                                prop="OPTIME"
                                :input-attr="{ placeholder: '当前日期', disabled: true }"
                            />
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer v-if="baTable.form.operate !=='view'&&baTable.form.operate !=='查看'">
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="handleSave" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm, FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import { codelib } from '/@/api/controllerUrls'

const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    TCNO: [buildValidatorData({ name: 'required', title: t('xPot.TCNO') })],
    OWER: [buildValidatorData({ name: 'required', title: t('xPot.OWER') })],
    QZDATE: [buildValidatorData({ name: 'date', message: t('Please enter the correct field', { field: t('xPot.QZDATE') }) })],
    TZDATE: [buildValidatorData({ name: 'date', message: t('Please enter the correct field', { field: t('xPot.TZDATE') }) })],
    BFDATE: [buildValidatorData({ name: 'date', message: t('Please enter the correct field', { field: t('xPot.BFDATE') }) })],
    SELLDATE: [buildValidatorData({ name: 'date', message: t('Please enter the correct field', { field: t('xPot.SELLDATE') }) })],
    IIC: [buildValidatorData({ name: 'date', message: t('Please enter the correct field', { field: t('xPot.IIC') }) })],
    ZZDATE: [buildValidatorData({ name: 'date', message: t('Please enter the correct field', { field: t('xPot.ZZDATE') }) })],
    OPTIME: [buildValidatorData({ name: 'date', message: t('Please enter the correct field', { field: t('xPot.OPTIME') }) })],
})

watchEffect(()=>{
    if(baTable.form.operate && baTable.form.items!.ZZDATE){
        let now = new Date().getTime()
        let zzDate = new Date(baTable.form.items!.ZZDATE).getTime()
        baTable.form.items!.POTAGE = ((now-zzDate)/1000/60/60/24/365).toFixed(1)
    }
})


const handleSave = ()=>{
    if(baTable.form.items!.GXCGQPZ == true)baTable.form.items!.GXCGQPZ = undefined
    if(baTable.form.items!.GXJRFS == true)baTable.form.items!.GXJRFS = undefined
    baTable.onSubmit(formRef.value)
}


const handleOwerChange = (val: string) => {
    baTable.form.items!.LEASEHOLDER = ''
    baTable.form.items!.QZDATE = ''
    baTable.form.items!.TIMELIMIT = ''
    baTable.form.items!.DAILYRENT = ''
    baTable.form.items!.TZDATE = ''
    baTable.form.items!.TZNOTE = ''
}

const handleStatusChange = () => {
    baTable.form.items!.BFDATE = ''
    baTable.form.items!.SELLDATE = ''
}
</script>

<style scoped lang="scss">
.el-form {
    display: flex;
    flex-wrap: wrap;
    > div {
        width: 25%;
    }
}
.down-wrapper{
    display: flex;
    flex-wrap: wrap;
    >div{
        width:33.3%;
    }
}
</style>
